<template>
  <div>
    <!-- banner -->
    <div class="category-banner banner">
      <h1 class="banner-title">分类</h1>
    </div>
    <!-- 饼图 -->
    <v-card class="blog-container hi">
      <div class="Echarts">
        <div id="main" style="width: 900px; height: 300px"></div>
      </div>
    </v-card>
    <!-- 分类列表 -->
    <v-card class="blog-container top">
      <div class="category-title">分类 - {{ count }}</div>
      <ul class="category-list">
        <li
          class="category-list-item"
          v-for="item of categoryList"
          :key="item._id"
        >
          <router-link :to="`/categories/${item.list[0]._id}`">
            {{ item._id }}
            <span class="category-count">({{ item.count }})</span>
          </router-link>
        </li>
      </ul>
    </v-card>
  </div>
</template>

<script>
export default {
  created() {
    this.listCategories();
  },
  mounted() {
    this.myEcharts();
  },
  data: function () {
    return {
      categoryList: [],
      count: 0,
    };
  },
  methods: {
    async listCategories() {
      const res = await this.$http.get(`cates`);
      this.categoryList = res.data;
      this.count = res.data.length;
    },
    async myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      const res = await this.$http.get(`cates`);
      var data = this.genData(res.data);
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "分类数量统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 150,
          top: 20,
          bottom: 20,
          data: data.legendData,
          selected: data.selected,
        },
        series: [
          {
            name: "分类名称",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    genData(arr) {
      let legendData = [];
      let selected = {};
      let seriesData = []
      arr.forEach((v) => {
        legendData.push(v._id);
      });
      legendData.forEach(v=>{
        selected[v]=true
      })
      for (let i = 0;i < arr.length; i++) {
        let obj = {}
        obj.name = arr[i]._id;
        obj.value = arr[i].count;
        seriesData.push(obj)
      }
      return {
        legendData: legendData,
        seriesData: seriesData,
        selected: selected,
      };
    },
  },
};
</script>

<style scoped>
.top {
  margin-top: 0;
}
.category-banner {
  background: url(https://2u-blog.oss-cn-beijing.aliyuncs.com/%E8%83%8C%E6%99%AF%E5%9B%BE/sp%E5%A7%91%E5%A7%91.jpg)
    center center / cover no-repeat;
  background-color: #49b1f5;
}
.category-title {
  text-align: center;
  font-size: 36px;
  line-height: 2;
}
@media (max-width: 759px) {
  .category-title {
    font-size: 25px;
  }
  .hi{
    display: none;
  }
  .top {
    margin-top: 250px;
  }
}
.category-list {
  margin: 0 1.8rem;
  list-style: none;
}
.category-list-item {
  padding: 8px 1.8rem 8px 0;
}
.category-list-item:before {
  display: inline-block;
  position: relative;
  left: -0.75rem;
  width: 12px;
  height: 12px;
  border: 0.2rem solid #49b1f5;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition-duration: 0.3s;
}
.category-list-item:hover:before {
  border: 0.2rem solid #ff7242;
}
.category-list-item a:hover {
  transition: all 0.3s;
  color: #8e8cd8;
}
.category-list-item a:not(:hover) {
  transition: all 0.3s;
}
.category-count {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: #858585;
}
</style>
